@import "./com";
header {
    .h_top {
        width: vw(750);
        height: vw(136);
        display: flex;
        align-items: center;
        justify-content: space-between;

        > span {
            font-size: vw(28);
        }

        > .va {
            margin-left: vw(20);
            width: vw(122);
            height: vw(57);
            border: vw(2) solid $col;
            border-radius: vw(26);

            > a p {
                margin: vw(8) vw(30);
            }
        }

        // 地区

        .sel {
            position: relative;
            margin-right: vw(10);

            > select {
                border: vw(1) solid $col;
                width: vw(160);
                height: vw(60);

                // 去除三角
                -webkit-appearance: none;
                appearance: none;
                font-size: vw(26);
                text-indent: vw(17);
            }
            li {
                content: "";
                position: absolute;
                right: vw(15);
                top: vw(23);
                border-top: vw(50);
                width: 0;
                height: 0;
                border: vw(15) solid transparent;
                border-top: vw(20) solid $col;
                pointer-events: none;
            }
        }
    }
}
.inp1 {
    justify-content: center;
    width: vw(750);
    display: flex;

    .inp {
        margin-left: 1px;
        display: flex;
        position: relative;
        width: vw(270);
        height: vw(53);
        border: vw(1) solid $col;
        border-radius: vw(26);

        // 搜索框

        &::after {
            content: "";
            position: absolute;
            right: vw(16);
            top: vw(10);
            width: vw(36);
            height: vw(34);
            background: url("../png/index/搜索矩.png") no-repeat TOP/cover;
        }
        > input {
            width: vw(183);
            height: vw(30);
            font-size: vw(24);
            margin-top: vw(10);
            margin-left: vw(27);
            border: none;
            outline: none;
        }
    }
}

.siez {
    display: flex;
    height: vw(70);
    align-items: center;
    justify-content: center;

    > p {
        margin-top: vw(20);
        font-size: vw(28);
    }
}

.box {
    justify-content: center;
    display: flex;
    width: vw(750);
    height: vw(80);

    > ul {
        margin: 0 vw(2);
        justify-content: center;
        display: flex;
        width: vw(130);
        height: vw(75);
        background-color: #dcdcdc;

        > li {
            align-items: center;
            display: flex;
            font-size: vw(22);

            a {
                color: #a0a0a0;
            }
        }
    }
}

// 内容

main {
    width: vw(750);
    height: 100%;
    position: relative;

    .groupbuying {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: vw(130);

        ul {
            img {
                margin: 0 vw(20);
                margin-right: vw(10);
                width: vw(50);
                height: vw(55);
                margin-bottom: vw(-10);
            }
        }
        span {
            font-size: vw(33);
        }
        div {
           display: flex;
           align-items: center;
            
            img {

                width: vw(27);
                height: vw(25);
                margin: 0 vw(20) 0 0;
            }
        }
        div {
            span {
                font-size: vw(26);
            }
        }
    }
}

.top {
    display: flex;
    width: vw(700);

    img {
        width: vw(277);
        height: vw(350);
    }
}

.top1 {
    margin: vw(0) vw(10) vw(160) vw(10);
    flex-wrap: wrap;
    width: vw(435);
    height: vw(175);
    display: flex;
    img {
        width: vw(432);
        height: vw(150);
    }
}

.top2 {
    margin: vw(0) vw(0) vw(0) vw(-1);
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
    width: vw(435);

    img {
        width: vw(212);
        height: vw(190);
    }
}

.top3 {
    display: flex;
    justify-content: space-around;
    width: vw(750);
    height: vw(400);
    img {
        width: vw(230);
        height: vw(200);
    }
}

//  尾部
nav {
    > ul {
        position: fixed;
        bottom: 0;
        background-color: #fff;
        width: vw(750);
        height: vw(110);
        display: flex;
        justify-content: space-around;
        > li {
            width: vw(70);
            height: vw(106);

            > a {
                > img {
                    width: vw(70);
                    height: vw(70);
                }
            }
            > p {
                text-align: center;
                font-size: vw(24);
            }
        }
    }
}
